How do we share states across two components?

Here we have a component that we're later going two split into two components, each handling a different task.

<script>
	import Sample from "./Sample.svelte";
</script>

<Sample />

After splitting it we have this:

<script>
	import Input from "./Input.svelte";
	import Output from "./Output.svelte";
</script>

<Input />
<Output />

How do we share the value variable?

We could have value in App2.svelte and pass the value by props or context , but perhaps we don't want have that value variable in App2.svelte since it's really only loading the components.

We could instead have another file called data.js where we put the value variable and the function to update it, and import these into the Input and Output components.

<script>
	import Input2 from "./Input2.svelte";
	import Output2 from "./Output2.svelte";
</script>

<Input2 />
<Output2 />

However, when we type we notice that it doesn't work ! This is because data.js is a Javascript file and not a .svelte file, so the value variable isn't reactive .

Is there a way we can fix this?

We could try having a subscription model (event listener style) where we subscribe to the changes in data.js, when there's a change, we can rerender by ourselvees.

<script>
	import Input3 from "./Input3.svelte";
	import Output3 from "./Output3.svelte";
</script>

<Input3 />
<Output3 />

We subscribe to the data and whenever the data changes we get notified and update the internal state (the _value variable) and since that was assigned in a .svelte file whenever _value changes we rerender .

This is the concept of a Svelte store .

You can have a variable or some kind of state in your application that is not a part of your app component hierarchy, meaning it can live in a separate .js file.

We can then import that file and use the store in any component without paying attention to the relationships between the components.

After that we provide a way to change the value and a way to subscribe to that value so when it changes you get notified .

Whenever we subscribe we also need a way to unsubscribe .

<script>
	import Input4 from "./Input4.svelte";
	import Output4 from "./Output4.svelte";
</script>

<Input4 />
<Output4 />

Unsubscribing in this way using onMount will make sure the subscribed function is removed when the component is unmonted .

We can implement a store like this by ourselves or use the store creation functions provided in Svelte which we'll do next.